/**
*@description 用户画像》营销创意偏好》线上活动
*@author yhw
*/
import React, { Component, PropTypes } from 'react';
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import MainLayout from '../components/MainLayout/MainLayout';
import RadarSimple from '../components/Persons/RadarSimple';
import BarSimple from '../components/Persons/BarSimple';
import Bar2 from '../components/Persons/Bar2';
import TableList from '../components/TableList';
import {Card, Icon, Tooltip, Row, Col} from 'antd';

const tips0 = (<div>整体互动意愿&nbsp;
  <Tooltip placement="right" title="线上整体互动意愿是指用户参与品牌线上活动的意愿程度">
          <Icon type="question-circle-o" />
  </Tooltip></div>),
tips1 = (<div>活动主题偏好&nbsp;
  <Tooltip placement="right" title="线上活动主题偏好是指根据用户参加品牌线上活动的信息计算得到的活动主题倾向偏好程度">
          <Icon type="question-circle-o" />
  </Tooltip></div>),
tips2 = (<div>活动形式偏好&nbsp;
  <Tooltip placement="right" title="线上活动形式偏好是指根据用户参加品牌线上活动的信息计算得到的活动形式倾向偏好程度">
          <Icon type="question-circle-o" />
  </Tooltip></div>),
tips3 = (<div>活动利益偏好&nbsp;
  <Tooltip placement="right" title="线上活动利益偏好是指根据用户参加品牌线上活动的信息计算得到的活动利益倾向偏好程度">
          <Icon type="question-circle-o" />
  </Tooltip></div>);

class MarketingOnline extends Component {
  constructor(props) {
      super(props);
  }
  // 获取数据
  fetchData(type, search){
    this.props.dispatch({
            type: type,
            payload: search
    })
  };
  initData(){
    this.fetchData('MarketingOnline/onlineAllQuery','');
    this.fetchData('MarketingOnline/marketingThemeQuery','');
    this.fetchData('MarketingOnline/marketingModelQuery','');
    this.fetchData('MarketingOnline/marketingValueQuery','');
  };
  componentWillMount() {
    this.initData();
  };
  render(){
  return (
    <MainLayout>
        <Row gutter={16} style={{marginTop:"29px"}}>
              <Col className="gutter-row" span={16}>
              <div className="gutter-box">
                        <Card title={tips0} style={{display: 'none'}}>
                              <BarSimple seriesName="整体互动意愿" data={this.props.MarketingOnline.onlineAllData} loading={this.props.MarketingOnline.onlineAllLoading} width={"100%"} height={300} />
                        </Card>
                        <Row gutter={16}>
                            <Col className="gutter-row" span={12}>
                                <div className="gutter-box">
                                  <Card title={tips1}>
                                        <RadarSimple seriesName="活动主题偏好" data={this.props.MarketingOnline.marketingThemeData} loading={this.props.MarketingOnline.marketingThemeLoading} width={"100%"} height={300} />
                                  </Card>
                                </div>
                            </Col>
                            <Col className="gutter-row" span={12}>
                                  <div className="gutter-box">
                                      <Card title={tips2}>
                                            <BarSimple seriesName="活动形式偏好" data={this.props.MarketingOnline.marketingModelData} loading={this.props.MarketingOnline.marketingModelLoading} width={"100%"} height={300} />
                                      </Card>
                                </div>
                            </Col>
                        </Row>
                        <Card title={tips3}>
                              <Bar2 seriesName="活动利益偏好" data={this.props.MarketingOnline.marketingValueData} loading={this.props.MarketingOnline.marketingValueLoading} width={"100%"} height={300} />
                        </Card>
              </div>
              </Col>
              <Col className="gutter-row" span={8}><div className="gutter-box"><TableList pageSize={18} /></div></Col>
        </Row>
    </MainLayout>
  );
  }
};

MarketingOnline.propTypes = {
};

function mapStateToProps({ MarketingOnline }) {
  return {
    MarketingOnline: {...MarketingOnline},
  };
}

export default connect(mapStateToProps)(MarketingOnline);
